<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>美年旅游</title>
        <meta name="description" content="美年旅游">
        <meta name="keywords" content="美年旅游">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
        <link rel="stylesheet" href="../css/orderset.css">
        <!-- 引入组件库 -->
        <script src="../js/vue.js"></script>
        <script src="../plugins/elementui/index.js"></script>
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script src="../js/axios-0.18.0.js"></script>
    </head>
    <body class="hold-transition">
    <div id="app">
        <div class="content-header">
            <h1>预约管理<small>预约设置</small></h1>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>预约管理</el-breadcrumb-item>
                <el-breadcrumb-item>预约设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="app-container">
            <div class="box">
                <div class="box ordersetting">
                    <el-card class="box-card">
                        <div class="boxMain">
                            <el-button style="margin-bottom: 20px;margin-right: 20px" type="primary" @click="downloadTemplate()">模板下载</el-button>
                            <el-upload action="/ordersetting/upload.do"
                                       name="multipartFile"
                                       :show-file-list="false"
                                       :on-success="handleSuccess"
                                       :before-upload="beforeUpload">
                                <el-button type="primary">上传文件</el-button>
                            </el-upload>
                        </div>
                        <div>
                            操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据后点击"上传文件"按钮上传模板文件。
                        </div>
                    </el-card>
                    <div class="calendar">
                        <!-- 年份 月份 -->
                        <div class="month">
                            <div class="currentdate">
                                <span class="choose-year">{{ currentYear }}年</span>
                                <span class="choose-month">{{ currentMonth }}月</span>
                            </div>
                            <div class="choose">
                                <span @click="goCurrentMonth(currentYear,currentMonth)" class="gotoday">今天</span>
                                <span @click="pickPre(currentYear,currentMonth)">❮</span>
                                <span @click="pickNext(currentYear,currentMonth)">❯</span>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <!-- 星期 -->
                        <div class="caldate">
                            <ul class="weekdays">
                                <li>周一</li>
                                <li>周二</li>
                                <li>周三</li>
                                <li>周四</li>
                                <li>周五</li>
                                <li>周六</li>
                                <li>周日</li>
                            </ul>
                            <!-- 日期 -->
                            <ul class="days">
                                <!-- v-for循环 每一次循环用<li>标签创建一天 -->
                                <li v-for="dayobject in days">
                                    <template>
                                        <!-- 非当前月份 -->
                                        <div class="other-month" v-if="dayobject.day.getMonth()+1 != currentMonth">
                                            {{ dayobject.day.getDate() }}
                                        </div>
                                        <!-- 当前月 -->
                                        <div class="everyday" v-if="dayobject.day.getMonth()+1 == currentMonth">
                                            <span class="datenumber">{{ dayobject.day.getDate()}}</span>
											<template>
                                                <template v-for="obj in leftobj">
                                                    <template v-if="obj.date == dayobject.day.getDate()">
                                                        <template v-if="obj.number > obj.reservations">
                                                            <div class="usual">
                                                                <p>可预约{{obj.number}}人</p>
                                                                <p>已预约{{obj.reservations}}人</p>
                                                            </div>
                                                        </template>
                                                        <template v-else>
                                                            <div class="fulled">
                                                                <p>可预约{{obj.number}}人</p>
                                                                <p>已预约{{obj.reservations}}人</p>
                                                                <p>已满</p>
                                                            </div>
                                                        </template>
                                                    </template>
                                                </template>
                                                <button v-if="dayobject.day > today" @click="handleOrderSet(dayobject.day)" class="orderbtn">设置</button>
                                            </template>											
                                        </div>
                                    </template>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                today:new Date(),//当前日期
                currentDay: 1,
                currentMonth: 1,
                LocalMonth: 1,
                currentYear: 1970,
                currentWeek: 1,
                days: [],  //存放显示的日期
                leftobj: []//用于装载页面显示的月份已经进行预约设置的数据
            },
            created: function () {//在vue初始化时调用
                this.initData(null);
                this.createdData();
            },
            methods: {
                createdData(){
                    /*发送请求获取显示的列表数据,当前年月 + 预约数据*/
                    var orderDate = this.currentYear + "-" + this.currentMonth
                    axios.get("/ordersetting/findTableList.do?orderDate="+orderDate).then((res)=>{
                        this.leftobj = res.data.data;
                    }).catch((err)=>{alert(err)})
                },
				//预约设置,修改预约信息
                handleOrderSet(day){
                    this.$prompt('请输入最大预约人数', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /^[+]{0,1}(\d+)$/,
                        inputErrorMessage: '数字格式不正确'
                    }).then(({ value }) => {

                        var orderDate = this.formatDate(day.getFullYear() ,day.getMonth() + 1,day.getDate());
                        var param ={
                            orderDate: orderDate,
                            number: value
                        };
                        axios.post("/ordersetting/setNumByOrderDate.do",param).then((res)=>{
                            this.$message({
                                type: res.data.flag?'success':'error',
                                message: res.data.message
                            });
                           this.createdData();
                        }).catch((err)=>{alert(err)})
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    });
                },
				//上传之前进行文件格式校验
                beforeUpload(file){
					//alert("文件名：" + file.name);
					//alert("文件类型：" + file.type);
					var f_index = file.name.lastIndexOf(".");

					if(f_index != -1){
						var f_type = file.name.substring(f_index+1, file.name.length).toLowerCase();

						if(f_type == 'xls' || f_type == 'xlsx'){
							return true;
						}
					}
				
                    const isXLS = file.type === 'application/vnd.ms-excel';
                    if(isXLS){
                        return true;
                    }
                    const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                    if (isXLSX) {
                        return true;
                    }
                    this.$message.error('上传文件只能是xls或者xlsx格式!');
                    return false;
                },
				//下载模板文件
                downloadTemplate(){
                    window.location.href="/template/ordersetting_template.xlsx";
                },
				//上传成功提示
                handleSuccess(response, file) {
                    if(response.flag){
                        this.$message.success(response.message);
                    }else{
                        this.$message.error(response.message);
                    }
                    console.log(response, file);
                },
                //初始化当前页要展示的日期
				initData: function (cur) {
                    var date;
                    var index = 0;   //控制显示预定的天数
                    if (cur) {
                        date = new Date(cur);
                    } else {
                        var now = new Date();//获取现在的日期时间
                        var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));//获取本年上个月的第一天
                        d.setDate(42);//设置日期格数
                        date = new Date(this.formatDate(d.getFullYear(), d.getMonth()+1, 1));//获取本年本月的第一天
                    }
                    this.currentDay = date.getDate();//获取本月第一天的号数
                    this.currentYear = date.getFullYear();//获取本年份
                    this.currentMonth = date.getMonth() + 1;//获取本月份
                    this.currentWeek = date.getDay(); //本月第一天是周几（周日0 周六 6） ——》 2
                    var today = new Date();//当前的日期
                    this.LocalMonth = today.getMonth() + 1;//当前的月份
                    if (this.currentWeek == 0) { //本月的第一天是不是周日
                        this.currentWeek = 7;// 用7来表示周日
                    }
                    var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);// 获取本月的第一天的字符串
                    this.days.length = 0;
                    // 今天是周日，放在第一行第7个位置，前面6个
                    //初始化当月第一天到之前月份的天数
                    for (var i = this.currentWeek - 1; i >= 0; i--) {  //假设本月第一天是周二
                        var d = new Date(str);//本月的第一天的年月日
                        d.setDate(d.getDate() - i);//设置当前显示月份格数的第一天的日期，默认修改的月份
                        var dayobject = {};
                        dayobject.day = d;
                        var now = new Date(); //获取当前电脑的时间
                        //如果今天是本月的第一天
                        if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                            dayobject.index = index++;//从今天开始显示供预定的数量
                        }
                        else if (index != 0 && index < 3)
                            dayobject.index = index++;//从今天开始3天内显示供预定的数量
                        this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
                    }
                    //初始化当月第一天之后的日期
                    for (var i = 1; i <= 42 - this.currentWeek; i++) {
                        var d = new Date(str);
                        d.setDate(d.getDate() + i);
                        var dayobject = {};//dayobject   {day:date,index:2}
                        dayobject.day = d;
                        var now = new Date();
                        if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                            dayobject.index = index++;
                        }
                        else if (index != 0 && index < 3)
                            dayobject.index = index++;
                        this.days.push(dayobject);
                    }
                },
				//切换到当前月份
                goCurrentMonth: function (year, month) {
                    var d = new Date();
                    this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                },
				//向前一个月
                pickPre: function (year, month) {
                    // setDate(0); 上月最后一天
                    // setDate(-1); 上月倒数第二天
                    // setDate(dx) 参数dx为 上月最后一天的前后dx天
                    var d = new Date(this.formatDate(year, month, 1));
                    d.setDate(0);
                    this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                    this.createdData();
                },
				//向后一个月
                pickNext: function (year, month) {
                    var d = new Date(this.formatDate(year, month, 1));
                    d.setDate(42);////获取指定天之后的日期
                    this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                    this.createdData();
                },
                // 返回 类似 2016-01-02 格式的字符串
                formatDate: function (year, month, day) {
                    var y = year;
                    var m = month;
                    if (m < 10) m = "0" + m;
                    var d = day;
                    if (d < 10) d = "0" + d;
                    return y + "-" + m + "-" + d
                }
            }
        })
    </script>
</html>